<template>
  <div class="searshow">


    <div class="top">
        <div class="goback" @click="$router.go(-1)">
            <svg t="1667007317201" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2539" width="200" height="200"><path d="M532.526499 904.817574L139.506311 511.797385 532.526499 118.777197c12.258185-12.258185 12.432147-32.892131-0.187265-45.51052-12.707416-12.707416-32.995485-12.703323-45.511543-0.187265L75.166957 484.739123c-7.120165 7.120165-10.163477 17.065677-8.990768 26.624381-1.500167 9.755178 1.5104 20.010753 8.990768 27.491121l411.660734 411.660734c12.258185 12.258185 32.892131 12.432147 45.511543-0.187265 12.707416-12.707416 12.7023-32.995485 0.187265-45.51052z" p-id="2540" fill="#8a8a8a"></path></svg>

        </div>
        <div class="box">
            <div class="zuo">商品</div>
            <input type="text" class="zhong" :value="keyword">
            <div class="you">
                <svg t="1667007892505" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3650" width="200" height="200"><path d="M846.525959 288.822035 733.689055 288.822035l-48.477085-116.694769c-11.257391-27.103288-37.495986-44.61615-66.845431-44.61615L408.757614 127.511115c-29.348422 0-55.587016 17.512862-66.845431 44.61615l-48.475038 116.694769L180.598194 288.822035c-62.71946 0-113.7456 51.02614-113.7456 113.7456l0 378.463658c0 62.71946 51.02614 113.7456 113.7456 113.7456l665.927765 0c62.71946 0 113.7456-51.02614 113.7456-113.7456L960.27156 402.567635C960.27156 339.847152 909.24542 288.822035 846.525959 288.822035zM918.909523 781.030269c0 39.912012-32.471552 72.383564-72.383564 72.383564L180.598194 853.413833c-39.913035 0-72.383564-32.471552-72.383564-72.383564L108.21463 402.567635c0-39.912012 32.470529-72.383564 72.383564-72.383564l126.641305 0c8.357342 0 15.892969-5.02955 19.098987-12.748349l53.770648-129.443118c4.824889-11.614525 16.070001-19.120476 28.64848-19.120476l209.608925 0c12.57848 0 23.823592 7.504928 28.646434 19.1215l53.772694 129.443118c3.207042 7.716752 10.742668 12.747325 19.10001 12.747325l126.641305 0c39.912012 0 72.383564 32.471552 72.383564 72.383564L918.910547 781.030269z" p-id="3651" fill="#8a8a8a"></path><path d="M513.561565 349.83769c-115.843378 0-210.089879 94.245478-210.089879 210.089879s94.245478 210.089879 210.089879 210.089879 210.089879-94.245478 210.089879-210.089879S629.405967 349.83769 513.561565 349.83769zM513.561565 728.655412c-93.036953 0-168.727843-75.691913-168.727843-168.727843s75.69089-168.727843 168.727843-168.727843c93.03593 0 168.727843 75.691913 168.727843 168.727843S606.598518 728.655412 513.561565 728.655412z" p-id="3652" fill="#8a8a8a"></path><path d="M456.241069 644.973524c-28.319999-19.131733-45.227064-50.924833-45.227064-85.046978 0-11.42112-9.258874-20.681018-20.681018-20.681018s-20.681018 9.259898-20.681018 20.681018c0 47.879474 23.713075 92.484368 63.433728 119.319549 3.549849 2.397606 7.574512 3.546779 11.559267 3.546779 6.638187 0 13.159718-3.190669 17.154705-9.106402C468.193285 664.222937 465.704604 651.368164 456.241069 644.973524z" p-id="3653" fill="#8a8a8a"></path><path d="M263.747963 381.095601l-86.860277 0c-11.422144 0-20.681018 9.258874-20.681018 20.681018s9.258874 20.681018 20.681018 20.681018l86.860277 0c11.422144 0 20.681018-9.258874 20.681018-20.681018S275.170107 381.095601 263.747963 381.095601z" p-id="3654" fill="#8a8a8a"></path></svg>
            </div>
        </div>
    </div>


    <div class="searchnav">
            <div class="item">综合<svg t="1667008531684" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4660" width="200" height="200"><path d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z" p-id="4661" fill="#d81e06"></path></svg>
            </div>
            <div class="item">销量</div>
            <div class="item">价格<svg t="1667008724589" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5673" width="200" height="200"><path d="M836.8 633.6H187.2c-32 0-51.2 20.8-35.2 36.8 24 25.6 310.4 324.8 324.8 339.2 17.6 19.2 56 16 72 0C560 998.4 854.4 688 872 670.4c16-17.6-4.8-35.2-35.2-36.8zM187.2 390.4h649.6c30.4 0 51.2-19.2 35.2-36.8-17.6-17.6-312-328-324.8-340.8-14.4-16-52.8-17.6-72 0C462.4 28.8 176 328 152 353.6c-16 16 3.2 36.8 35.2 36.8z" fill="#707070" p-id="5674"></path></svg>
            </div>
            <div class="item">品牌</div>
            <div class="item">筛选<svg t="1667008838851" class="icon" viewBox="0 0 1170 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7981" width="200" height="200"><path d="M36.571429 73.142857h1097.142857a36.571429 36.571429 0 0 0 0-73.142857H36.571429a36.571429 36.571429 0 0 0 0 73.142857zM1133.714286 471.04H36.571429a36.571429 36.571429 0 0 0 0 73.142857h1097.142857a36.571429 36.571429 0 0 0 0-73.142857zM1133.714286 950.857143H36.571429a36.571429 36.571429 0 0 0 0 73.142857h1097.142857a36.571429 36.571429 0 0 0 0-73.142857z" fill="#8a8a8a" p-id="7982"></path></svg></div>

    </div>

    <div class="nothing" v-if="has==false">
        <div class="tips">
            <svg t="1667009237368" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9763" width="200" height="200"><path d="M42.666667 149.333333a21.333333 21.333333 0 0 1 21.333333-21.333333h256a21.333333 21.333333 0 0 1 0 42.666667H64a21.333333 21.333333 0 0 1-21.333333-21.333334z m917.333333 746.666667h-128a21.333333 21.333333 0 0 0 0 42.666667h128a21.333333 21.333333 0 0 0 0-42.666667zM64 554.666667h256a21.333333 21.333333 0 0 0 0-42.666667H64a21.333333 21.333333 0 0 0 0 42.666667z m554.666667 341.333333H64a21.333333 21.333333 0 0 0 0 42.666667h554.666667a21.333333 21.333333 0 0 0 0-42.666667z m241.673333-432.16A212.406667 212.406667 0 0 1 725.333333 512c-117.82 0-213.333333-95.513333-213.333333-213.333333s95.513333-213.333333 213.333333-213.333334 213.333333 95.513333 213.333334 213.333334a212.406667 212.406667 0 0 1-48.16 135.006666l84.58 84.573334a21.333333 21.333333 0 0 1-30.173334 30.173333zM896 298.666667c0-94.253333-76.413333-170.666667-170.666667-170.666667S554.666667 204.413333 554.666667 298.666667s76.413333 170.666667 170.666666 170.666666 170.666667-76.413333 170.666667-170.666666z" fill="#707070" p-id="9764"></path></svg>
            <div class="wenzi">
                没有搜索到对应商品
            </div>
        </div>
    </div>
    <div class="showsbox" v-if="has==true">
        <div class="items" v-for="(item,index) in newlist" :key="index">
            <div class="imgs">
                <img :src="item.imgs" alt="">
            </div>
            <div class="xq">
                <p class="one">{{item.name}}</p>
                <p class="two">
                    <svg t="1667011311619" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11169" width="200" height="200"><path d="M512.58254222 96.64739555c-180.00554667 0-326.22364445 146.21809778-326.22364444 326.22364445s146.21809778 326.22364445 326.22364444 326.22364445 326.22364445-146.21809778 326.22364445-326.22364445c-0.58254222-180.00554667-146.80064-326.22364445-326.22364445-326.22364445z m125.24657778 326.22364445c0 69.32252445-55.92405333 125.24657778-125.24657778 125.24657778s-125.24657778-55.92405333-125.24657777-125.24657778 55.92405333-125.24657778 125.24657777-125.24657778c68.73998222 0 125.24657778 55.92405333 125.24657778 125.24657778zM194.51448889 576.07964445l-123.49895111 153.20860444c-6.99050667 8.73813333-8.73813333 20.97152-4.66033778 32.03982222s14.56355555 18.05880889 26.2144 19.22389334l126.41166222 11.65084444 40.77795556 121.16878222c3.49525333 11.06830222 12.81592889 18.64135111 24.46677333 20.97152 1.74762667 0.58254222 3.49525333 0.58254222 5.24288 0.58254222 9.32067555 0 18.64135111-4.07779555 24.46677334-11.65084444L436.26951111 768.31857778c-106.02268445-23.88423111-195.15164445-95.53692445-241.75502222-192.23893333zM956.47971555 729.87079111l-125.24657777-155.53877333c-46.02083555 96.70200889-134.56725333 168.93724445-241.17248 192.82147555l122.91640889 155.53877334c5.82542222 7.57304889 15.14609778 11.65084445 24.46677333 11.65084444 1.74762667 0 3.49525333 0 5.24288-0.58254222 11.06830222-1.74762667 20.97152-9.90321778 24.46677333-20.97152l40.77795556-121.16878222 126.41166222-11.65084445c11.65084445-1.16508445 21.55406222-8.15559111 26.2144-19.22389333 4.66033778-9.90321778 2.91271111-22.13660445-4.07779556-30.87473778z" fill="#209c09" p-id="11170"></path></svg>
                    先用后付 <span>{{item.qijian}}</span>
                </p>
                <p class="three">￥{{item.price}}<span>已拼{{item.wan}}万+件</span></p>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { getapidata } from "../api/newsele";
export default {
    data(){
        return{
            keyword:"",//传过来的关键字
            keylists:"",//遍历的数据
            has:"",//判断显示啥
            newlist:""//新的数据列表
        }
    },
    methods:{

    },
    created(){
        getapidata().then(data=>{
            this.keylists = data.keylists
            
        })
        this.keyword = window.localStorage.getItem("keyword")
        console.log(this.keyword)
        //判断数据里面是否又关键字
        //有就显示遍历的数据，没有就显示其他的
        this.keylists.forEach(item=>{//遍历数据
            if(item.name.indexOf(this.keyword) != -1){//如果关键字在数据里面有
                this.newlist.push(item)
                console.log(this.newlist)   
                this.has=true
            }
        })
    }
}
</script>

<style lang="scss">
.searshow .top{
    width: 100%;
    height: 60px;
    background-color: #fff;
    border-bottom: 1px solid #dfdfdf;
    display: flex;
    align-items: center;
    .goback{
        svg{
            width: 25px;
            height: 25px;
            margin-left: 10px;
            margin-right: 10px;
        }
    }
    .box{
        flex: 1;
        display: flex;
        align-items: center;
        .zuo{
            width: 40px;
            height: 36px;
            border-right: 1px solid #dfdfdf;
            background-color: #ededed;
            font-size: 14px;
            text-align: center;
            line-height: 36px;
            border-radius: 5px 0 0 5px;
        }
        .zhong{
            flex: 1;
            height: 36px;
            outline: none;
            border: none;
            background-color: #ededed;
            text-indent: 10px;
            font-size: 12px;
        }
        .you{
            width: 36px;
            height: 36px;
            background-color: #ededed;
            margin-right: 18px;
            display: flex;
            align-items: center;
            border-radius: 0 5px 5px 0;
            svg{
                width: 20px;
                height: 20px;

            }
        }
    }
}
.searshow .searchnav{
    width: 100%;
    height: 30px;
    display: flex;
    border-bottom: #ededed 1px solid;
    .item{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        svg{
            width: 10px;
            height: 10px;
        }
    }
}
.searshow .nothing{
    display: none;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .tips{
        margin-top: 200px;
        display: flex;
        width: 140px;
        height: 100px;
        flex-direction: column;
        align-items: center;
        svg{
            width: 80px;
            height: 80px;
        }
        .wenzi{
            width: 140px;
            height: 20px;
            font-size: 14px;
            color: #8a8a8a;
            text-align: center;
        }
    }
}
.searshow .showsbox{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .items{
        width: 48%;
        margin: 0.5%;
        border: 1px solid #000;
        height: 236px;
        display: flex;
        flex-direction: column;

        .imgs{
            width: 96%;
            margin: 0 auto;
            height: 170px;
            overflow: hidden;
            img{
                width: 100%;
                display: block;
            }
        }
        .xq{
            width: 100%;
            height: 66px;
            box-sizing: border-box;
            padding: 5px 10px;
            display: flex;
            flex-direction: column;  
            .one{
                font-size: 12px;
                color: #000;
                overflow: hidden; 
                text-overflow: ellipsis;
                 white-space: nowrap;
                 width: 100%;
            }                
            .two{
                margin-top: 3px;
                font-size: 12px;
                color: #5ab047;
                span{
                    font-size: 12px;
                    color: red;
                    font-weight: 600;
                }
                svg{
                    width: 12px;
                    height: 12px;
                }
            }      
            .three{
                margin-top: 3px;
                font-size: 14px;
                color: red;
                span{
                    color: #9f9f9f;
                    font-size: 10px;
                }
            }
        }
    }
}
</style>